<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <script src="./js/jquery.min.js"></script>
  <script src="./js/popper.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <script src="./js/jquery-1.11.3.js"></script>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/login.css">
  <title>Document</title>
  <style></style>
</head>

<body>
  <header>
    <div class="container">
      <h1 class="d-flex align-items-center"><a href="index.html" class="d-block"></a></h1>
    </div>
  </header>

  <!-- 登录主界面 -->
  <section class="mz-main">
    <div class="container h-100">
      <form class="mz-login-1">
        <h2 class="nav nav-tabs border-0">
          <a href="#show1" class="nav-link px-4 active" data-toggle="tab">账号登录</a>
          <span class="d-inline-block"></span>
          <a href="#show2" class="nav-link px-4" data-toggle="tab">二维码登录</a>
        </h2>
        <div class="tab-content mz-login-content">
          <div id="show1" class="show tab-pane active">
            <ul>
              <li class="mz-tips px-3">
                <i class="mz-err"></i>
                <span class="mz-tips-info"></span>
                <span class="mz-close"></span>
              </li>
              <li class="uname">
                <input type="text" name="uname" id="uname" value="" placeholder="手机号/ Flyme 账号" autocomplete="off">
              </li>
              <li class="upwd">
                <input type="password" name="upwd" id="upwd" value="" placeholder="密码">
              </li>
              <li class="autoLogin">
                <input type="checkbox" name="autoLogin" value="0" id="autoLogin">
                <label for="autoLogin">记住登录状态</label>
              </li>
              <li><button type="button" class="w-100 border-0">登录</button></li>
              <li class="clearfix">
                <a href="register.html" class="float-left">注册</a>
                <a href="#" class="float-right">忘记密码?</a>
              </li>
            </ul>
          </div>
          <div id="show2" class="show tab-pane">
            <img src="./images/login/mzQrShow.jfif" alt="">
          </div>
        </div>
        <a href="#" id="toPhone"></a>
      </form>
      <form action="#" class="mz-login-2">
        <h2 class="text-center">验证码登录</h2>
        <div class="mz-tips px-3">
          <i class="mz-err"></i>
          <span class="mz-tips-info"></span>
          <span class="mz-close"></span>
        </div>
        <div class="mz-phone">
          <select name="mz-phoneid" id="phone">
            <option class="text-center">+86</option>
            <option class="text-center">+886</option>
            <option class="text-center">+852</option>
          </select>
          <input type="text" value="" id="uphone" name="uphone" placeholder="手机号码">
        </div>
        <div><button type="button" class="w-100 border-0">登录</button></div>
        <div class="clearfix">
          <a href="register.html" class="float-left">注册</a>
          <a href="#" class="float-right">忘记密码?</a>
        </div>
        <a href="#" id="toPc"></a>
      </form>
    </div>
  </section>

  <footer>
    <div class="container">
      <div class="mz-info mt-5 mx-3">
        <ul class="clearfix d-inline-block mz-list">
          <li><a href="#">关于魅族</a></li>
          <li><a href="#">工作机会</a></li>
          <li><a href="#">联系我们</a></li>
          <li><a href="#">法律声明</a></li>
          <li><a href="#">常见问题</a></li>
          <li class="lang">
            <a href="#">简体中文</a>
            <ul>
              <li><a href="#">简体中文</a></li>
              <li><a href="#">English</a></li>
            </ul>
          </li>
        </ul>
        <span class="ml-5">客服热线</span>
        <span class="ml-3">400-788-3333</span>
        <a href="#" class="d-inline-block text-center ml-4">在线客服</a>
        <ul class="mz-icon d-flex justify-content-between">
          <li>
            <a href="#" class="d-block mz-weibo"></a>
          </li>
          <li>
            <a href="#" class="d-block mz-weixin"></a>
          </li>
          <li>
            <a href="#" class="d-block mz-qq"></a>
          </li>
        </ul>
      </div>
      <div class="mz-copyright mt-3 mx-3">
        <span>©2021 Meizu Telecom Equipment Co., Ltd. All rights reserved.</span>
        <a href="#">备案号: 粤ICP备13003602号-4</a>
        <a href="#">经营许可证编号: 粤B2-20130198</a>
        <a href="#">营业执照</a>
        <a href="#">
          <img src="./images/login/gongan.png" alt="">
          粤公网安备 44049102496076号</a>
      </div>
    </div>
  </footer>

  <script src="./js/login.js"></script>

</body>

</html>